<template>
	<view class="index">
		<index-menu-list></index-menu-list>
		<index-recommend class="u-m-t-20"></index-recommend>
		<index-hot-sale class="u-m-t-20"></index-hot-sale>
		<index-tabs class="u-m-t-20" :current='current' @change='change' :disabled='disabled' :menuList='menuList'></index-tabs>
		<view class="u-m-t-20" v-for="(item,index) in nowList" :key='index'>
			<index-list-item class="u-m-b-20" :item='item'></index-list-item>
		</view>
		<u-loadmore :status="status" :load-text="loadText" @loadmore='loadmore'/>
	</view>
</template>

<script>
	import {
		goodsList
	} from '@/common/data/data.js'
	export default {
		data() {
			return {
				disabled: false,
				title: '',
				current: 0,
				dataList: [],
				nowList: [],
				status: 'loadmore',
				loadText: {
					loadmore: '点击加载更多',
					loading: '努力加载中',
					nomore: '没有更多了'
				},
				menuList: [{
						name: '全部',
						subNmae: '猜你喜欢',
						render: true,
						id: 1
					},
					{
						name: '时令',
						subNmae: '当季优选',
						render: false,
						id: 2
					},
					{
						name: '进口',
						subNmae: '国际直采',
						render: false,
						id: 3
					},
					{
						name: '人气',
						subNmae: '大家在买',
						render: false,
						id: 4
					}
				],
			}
		},
		onLoad() {
			this.nowList = goodsList
			this.dataList[this.current] = this.nowList
		},
		onNavigationBarSearchInputClicked() {
			uni.navigateTo({
				url:'/pages/search/search'
			})
		},
		onReachBottom() {
			this.loadmore()
		},
		methods: {
			tabsDisabled() {
				this.disabled = !this.disabled
			},
			loadmore() {
				this.tabsDisabled()
				setTimeout(() => {
					this.nowList = this.nowList.concat(goodsList)
					this.dataList[this.current] = this.nowList
					this.status = 'loadmore'
					this.tabsDisabled()
				}, 600)
			},
			change(i) {
				this.current = i
				if (!this.menuList[i].render) {
					this.nowList = []
					this.status = 'loading'
					this.tabsDisabled()
					setTimeout(() => {
						this.nowList = goodsList
						this.dataList[this.current] = this.nowList
						this.status = 'loadmore'
						this.tabsDisabled()
					}, 600)
				} else {
					this.nowList = this.dataList[this.current]
				}
				this.menuList[i].render = true
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f5f5f5;
	}
	.index{
		padding: 30rpx;
	}
</style>
